<template>
  <view class="signupContent">
    <view class="header">
      <!-- 菜单 -->
      <Menu
        :isShowMenu="isShowMenu"
        @clickMenu="isShowMenu = true"
        @closeMenu="isShowMenu = false"
      ></Menu>
    </view>
    <view class="loginContent">
      <view class="title">注册新的账户</view>
      <!-- 注册 -->
      <van-form @submit="login">
        <view class="iptTitle">邀请码<span class="required">*</span></view>
        <van-field v-model="form.invite" name="邀请码" disabled />
        <view class="iptTitle">姓名</view>
        <van-field
          v-model="form.username"
          name="姓名"
          :rules="[
            { required: false, message: '请填写姓名' },
            {
              validator: usernameValidator,
              message: '姓名必须是1-32位的中文或者英文'
            }
          ]"
        />
        <view class="iptTitle">邮件地址<span class="required">*</span></view>
        <van-field
          v-model="form.email"
          name="邮件地址"
          :rules="[
            { required: true, message: '请填写邮件地址' },
            { validator: emailValidator, message: '请填写正确的邮件地址' }
          ]"
        />
        <view class="iptTitle">密码<span class="required">*</span></view>
        <van-field
          v-model="form.password"
          name="密码"
          type="password"
          :rules="[
            { required: true, message: '请输入密码' },
            {
              validator: passwordValidator,
              message: '密码必须是8-16位,由数字和字母组成'
            }
          ]"
        />
        <view class="iptTitle"
          >请再次输入密码<span class="required">*</span></view
        >
        <van-field
          v-model="form.confirmPassword"
          name="确认密码"
          type="password"
          :rules="[
            { required: true, message: '请再次输入密码' },
            { validator: confirmPwdValidator, message: '两次输入密码不一致' }
          ]"
        />
        <view class="iptTitle">家庭地址</view>
        <van-field
          v-model="form.address"
          name="家庭地址"
          :rules="[
            { required: true, message: '请输入家庭地址' },
            { validator: addressValidator, message: '请输入正确的家庭地址' }
          ]"
        />
        <view class="iptTitle">手机号</view>
        <van-field
          v-model="form.mobile"
          name="手机号"
          :rules="[
            { required: true, message: '请输入手机号' },
            { validator: mobileValidator, message: '请输入正确的手机号' }
          ]"
        />
        <van-button class="loginBtn" block color="#ddd">注册</van-button>
      </van-form>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isShowMenu: false,
      form: {
        invite: '777',
        username: '',
        email: '',
        password: '',
        confirmPassword: '',
        address: '',
        mobile: ''
      }
    }
  },
  methods: {
    // 姓名校验
    usernameValidator(val) {
      return /^[a-zA-Z]{1,32}$|^[\u4e00-\u9fa5]{1,32}$/.test(val)
    },
    // 邮箱校验
    emailValidator(val) {
      return /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(val)
    },
    //密码校验
    passwordValidator(val) {
      return /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/.test(val)
    },
    // 再次输入密码校验
    confirmPwdValidator(val) {
      return new Promise((resolve) => {
        if (this.form.password !== val) {
          resolve(false)
        }
      })
    },
    // 家庭地址校验
    addressValidator(val) {
      return /^([\u4e00-\u9fa5]|[a-zA-Z0-9_]){1,32}$/.test(val)
    },
    // 手机号校验
    mobileValidator(val) {
      return /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/.test(
        val
      )
    },
    login(values) {
      console.log('登录', values)
    }
  }
}
</script>
<style>
page {
  height: 100%;
}
</style>
<style lang="scss" scoped>
.signupContent {
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 50rpx;
}
.header {
  height: 100rpx;
  background-color: #37383a;
  margin-bottom: 30rpx;
}
.loginContent {
  margin: 0 25rpx;
  padding-bottom: 30rpx;
  .title {
    font-size: 48rpx;
    font-weight: bold;
    margin-bottom: 40rpx;
  }
  .required {
    margin-left: 10rpx;
    color: #f3281a;
  }
  .van-cell:not(:last-child)::after {
    border-bottom: transparent;
  }
  ::v-deep .van-field {
    width: 700rpx;
    padding: 0;
    margin: 20rpx 0 50rpx 0;
    position: relative;
    overflow: initial;
    .van-field__error-message {
      position: absolute;
      left: 0;
      bottom: -60%;
    }
    .van-field__control {
      padding: 10rpx;
      border: 4rpx solid #ccc;
      color: #000;
      &:-webkit-autofill,
      &:-webkit-autofill:hover,
      &:-webkit-autofill:focus,
      &:-webkit-autofill:active {
        -webkit-transition-delay: 99999s;
        -webkit-transition: color 99999s ease-out,
          background-color 99999s ease-out;
      }
      &:focus {
        transition: 0.3s;
        border: 4rpx solid #4caded;
      }
    }
  }
  .iptTitle {
    color: #37383a;
    font-weight: 700;
    font-size: 28rpx;
  }
  .loginBtn {
    width: 700rpx;
    margin: 20rpx 0;
    border: 2rpx solid #7f8081 !important;

    .van-button__text {
      color: #000;
    }
  }
}
</style>
